<template>
	<view class="all">
		<view class="top">
			<view class="topleft">
				<image class="topleftimg" src="/static/user.png"></image>
			</view>

			<view class="topright">
				<view class="username">Hi {{userInfo.firstName}}</view>
			</view>
		</view>
		<view class="center">
			<view class="list" @click="checkVersion">
				<view class="listleft">version</view>
				<view class="right-box">
					<view class="listright1">1.0.0</view>
					<image src="/static/arrowR.png" class="arrow"></image>
				</view>
				
			</view>
			
			<view class="list" @click="logout">
				<view class="listleft">Switch accounts</view>
				<image src="/static/arrowR.png" class="arrow"></image>
			</view>
			
			<view class="list" @click="policy">
				<view class="listleft">Privacy Policy</view>
				<image src="/static/arrowR.png" class="arrow"></image>
			</view>
			
			<view class="list" @click="about">
				<view class="listleft">About us</view>
				<image src="/static/arrowR.png" class="arrow"></image>
			</view>
			
			<view class="list" @click="service">
				<view class="listleft">Customer service</view>
				<image src="/static/arrowR.png" class="arrow"></image>
			</view>
			
			<view class="list" @click="suggest">
				<view class="listleft">Complaint and suggestions</view>
				<image src="/static/arrowR.png" class="arrow"></image>
			</view>
		</view>
		
		<view class="exit" @click="logout">Log Out</view>
	</view>
</template>

<script>
	import {getUser,signOut} from "@/api/common.js"
	export default {
		data() {
			return {
				userInfo:{}

			}
		},
		
		onLoad() {
			this.getUserInfo()
		},
		
		methods: {
			getUserInfo() {
				let self = this;
				getUser().then(res => {
					if (res.code == '0000') {
						self.userInfo = res?.data || {}
					} else {
						self.UTILS.logStr(res.message);
					}
				})
			},
			
			logout(){
				let self = this;
				signOut().then(res => {
					if (res.code == '0000') {
						
					} else {
						self.UTILS.logStr(res.message);
					}
					uni.removeStorageSync("cToken");
					uni.removeStorageSync('canLogin')
					uni.reLaunch({
						url:'/pages/login/login',
						animationType: 'pop-in',
						animationDuration: 200
					})
				})
				uni.removeStorageSync("cToken");
				uni.removeStorageSync('canLogin')
				uni.reLaunch({
					url:'/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			
			checkVersion(){
				const newVersionCode = uni.getStorageSync("newVersionCode") || "V10001"
				plus.runtime.getProperty(plus.runtime.appid,(wgtinfo) => {
					const versionCode = Number(wgtinfo.versionCode);
					if(newVersionCode == "V00002"){//有更新
						uni.showModal({
							title: 'version update',
							content: `Detected a new version`,
							confirmText: 'update now',
							success: (result) => {
								if (result.confirm) {
									const appleId = this.COFIG?.appleId;
									plus.runtime.launchApplication({
										action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
									}, function(e) {
										console.log('Open system default browser failed: ' + e.message);
									});
								}
							}
						})
					}
				})
			},
			
			policy(){
				uni.navigateTo({
					url:'/pages/privacy/index?type=hide',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			suggest(){
				uni.navigateTo({
					url:'/pages/suggestions/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			service(){
				uni.navigateTo({
					url:'/pages/service/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			about(){
				uni.navigateTo({
					url:'/pages/about/index',
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style>
	page,
	view,
	img {
		padding: 0;
		margin: 0;
	}

	page {
		background-color: #F8f8f8;
	}

	.all {
		width: 100%;
		background-color: #F8f8f8;
	}

	.top {
		display: flex;
		align-items: center;
		padding: 32rpx 0 32rpx 40rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.topleft {
		margin-right: 60rpx;
		text-align: center;
	}

	.topleftimg {
		width: 130rpx;
		height: 130rpx;
	}

	.topright {
		flex:1;
		color: #8F939C;
		font-size: 30rpx;
	}

	.username {
		width: 60px;
		height: 28px;
		overflow-wrap: break-word;
		color: rgba(2, 1, 14, 1);
		font-size: 35rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 28px;
		display: block;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 2%;
	}

	.center {
		margin: 20rpx auto;
		padding: 20rpx 0;
		width: 680rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20rpx 30rpx;
		color: #616161;
		font-size: 35rpx;
		overflow: hidden;
	}
	.arrow{
		width: 40rpx;
		height: 40rpx;
	}
	.right-box{
		display: flex;
		align-items: center;
	}

	.listright1 {
		font-size: 30rpx;
		color: #616161;
		margin-right: 12rpx;
	}

	.exit {
		width: 650rpx;
		height: 80rpx;
		margin: 100rpx auto;
		color: rgb(252, 170, 93);
		font-size: 38rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #eeeeee;
		border-radius: 20rpx;
	}
</style>
